<script setup>
import { RouterView } from 'vue-router'
import { onMounted, ref } from "vue";
import logo from '/public/icons8-doge-50.png'

onMounted(() => {
  
})

</script>

<template>
  <div class="common-layout">
    <el-container class="page">
      <el-header class="header">
        <el-image style="width: 50px; height: 50px" :src="logo" />
      </el-header>

      <!--  aside -->
      <el-container class="content">
        <el-aside width="180px" class="aside">
          <el-menu default-active="/machine/ipmi" mode="vertical" router="router" class="menu">
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <Cpu />
                </el-icon>
                <span>机器管理</span>
              </template>
              <el-menu-item index="/machine/ipmi">IPMI</el-menu-item>
              <el-menu-item index="/machine/ssh">SSH</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="2" disabled>
              <template #title>
                <el-icon>
                  <Coin />
                </el-icon>
                <span>应用部署</span>
              </template>
              <el-menu-item index="/deploy/os">操作系统</el-menu-item>
              <el-menu-item index="/deploy/mysql-single">MySQL</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="3" disabled>
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span>测试页面</span>
              </template>
              <el-menu-item index="/login">登录</el-menu-item>
              <el-menu-item index="/register">注册</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>

        <!-- main -->
        <el-main class="main" >
          <RouterView />          
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped lang="less">
.header {
  background-color: rgba(245, 167, 112, .98);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 9999;
}

:deep(.el-menu) {
  height: 100%;
}

.main{
  overflow: visible;
}

.menu{
  position: fixed;
}
.common-layout {
  height: 100%;

  .el-container {
    height: 100%;
  }
}
</style>
